;(function(){
    //菜单栏二级菜单
    class AddElement{
        constructor(){
            this.bigBox = document.querySelector(".banner_list_active");
            this.bUl = document.querySelector(".banner_list_box"); 
            this.bigBoxFat = document.querySelector('.banner');
        }
        getData(){
            var that =this;
            var p1 = pAjax({
                url:"http://localhost/XMYP/src/php/list.php",
                type:"post"
            });
            p1.then(function(res){
                that.data = JSON.parse(res);
                that.classification();
            })
        }
        classification(){
            this.data01 = [];
            this.data02 = [];
            for(var i = 0 ; i < this.data.length ; i++){
                if(this.data[i].column==1){
                    this.data01.push(this.data[i]);
                }
                if(this.data[i].column==2){
                    this.data02.push(this.data[i]);
                }
            }
            this.add();
        }
        add(){
            // 01的列表
            var str = `<div class="banner_listact_box"><p>${this.data01[0].category}</p><ul class="clear_fix">`;
            for(var i = 0 ; i < this.data01.length;i++){
                str += `
                <li>
                    <img src="${this.data01[i].address}" alt="">
                    <span>${this.data01[i].title}</span>
                </li>
                `;
            }
            str +=  " </ul></div>";
            // 02的列表
            str += `<div class="banner_listact_box"><p>${this.data02[0].category}</p><ul class="clear_fix">`;
            for(var i = 0 ; i < this.data02.length;i++){
                str += `
                <li>
                    <img src="${this.data02[i].address}" alt="">
                    <span>${this.data02[i].title}</span>
                </li>
                `;
            }
            str +=  " </ul></div>";
            this.bigBox.innerHTML = str;
        }
        addEnent(){
            var that = this;
            this.bUl.onmouseover=function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "LI" || tar.tagName =="A"){
                    that.bigBox.style.display = "block";
                    that.bigBox.scrollTop = 0;
                }                
            }
            this.bigBox.onmouseover=function(eve){
                that.bigBox.style.display = "block";
            }
            this.bigBoxFat.onmouseout=function(eve){
                // var e = eve || window.event;
                // if(e.stopPropagation){
                //     e.stopPropagation();
                // }else{
                //     e.cancelBubble = true ;
                // }
                that.bigBox.style.display = "none";
            }
        }
    }

    var addElement = new AddElement();
    addElement.getData();
    addElement.addEnent();

}());